<template>
  <div>
    <div class="page-body">
        <el-form :model="queryForm" ref="queryFormRef" :inline="true" size="small">
            <el-form-item label="昵称：">
                <el-input size="small" v-model="queryForm.search" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：">
                <el-input size="small" v-model.trim="queryForm.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="分享客状态：">
                <el-select size="small" v-model="queryForm.status" placeholder="请选择分享客状态" clearable>
                    <el-option v-for="item in statusDataList" :key="'status' + item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="成为分享客：">
                <el-date-picker size="small" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="small" class="width_104" type="primary" @click="getPageDataList()">查询</el-button>
                <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="pageData" v-loading="loading" stripe :header-cell-style="tableHeaderStyle">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="头像">
                <template slot-scope="scope">
                    <img :src="baseImgUrl + '/' + scope.row.headUrl" class="shop_avator" v-if="scope.row.headUrl">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="昵称"></el-table-column>
            <el-table-column prop="phone" label="手机号码"></el-table-column>
            <el-table-column prop="levelName" label="等级"></el-table-column>
            <el-table-column prop="inviterId" label="邀请人ID"></el-table-column>
            <el-table-column prop="inviteNum" label="邀请人数"></el-table-column>
            <el-table-column prop="createTime" label="成为分享客时间"></el-table-column>
            <el-table-column prop="status" label="分享客状态">
                <template slot-scope="scope">
                    <el-switch :value="scope.row.status == 1"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" @click="pathDetail(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="statusChangeOption(scope.row)">{{scope.row.status == 1 ? '冻结' : '解冻'}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="text-center">
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
    </div>

    <!-- 冻结弹窗 -->
    <el-dialog center :show-close="false" :visible.sync="isShowDialog" width="30%">
      <div class="text-center" v-if="dialogShowData">
        <img :src="baseImgUrl + '/' + dialogShowData.headUrl" class="shop_avator" v-if="dialogShowData.headUrl">
        <p class="font-weight--lg font-size--xs">{{dialogShowData.name}}</p>
        <p class="font-weight--lg font-size--xs">{{dialogShowData.phone}}</p>
        <p>冻结账号说明：</p>
        <p>该账号被冻结，包括账户内的积分、账户余额等，<br> 该账户不能发生任何交易行为（等于没有登录的状态）。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmOption()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Setting from '@/settings';
  import { GetShareCustomerList, UpdateShareCustomerStatus } from '@/views/shared-management/services/index';

  export default {
    data() {
      return {
        statusDataList: [
          { name: '正常', value: 1 },
          { name: '冻结', value: 2 }
        ],
        queryForm: {
            search: '',
            phone: '',
            status:	'',
            startTime: '',
            endTime: ''
        },
        dateTime: [],
        pageData: [],
        pageCount: 0,
        pageIndex: 1,
        loading: false,
        pageSize: Setting.defaultTablePaginationSize,
        pageSizes: Setting.tablePaginationSizes,
        tableHeaderStyle: Setting.tableHeaderStyle,
        paginationLayout: Setting.tablePaginationLayout,

        baseImgUrl: process.env.VUE_APP_FILE_URL,

        dialogShowData: null,
        isShowDialog: false
      }
    },
    watch: {
      dateTime(value) {
        if (!value) {
            this.queryForm.startTime = '';
            this.queryForm.endTime = '';
        }
        if(value.length > 0) {
            this.queryForm.startTime = value[0];
            this.queryForm.endTime = value[1];
        }
      }
    },
    methods: {
      pathDetail(row) {
        this.$router.push({ name: 'SharedSharersDetail', query: { id: row.userId } });
      },
      statusChangeOption(rowData) {
        this.dialogShowData = rowData;
        this.isShowDialog = true;
      },
      confirmOption(){
        UpdateShareCustomerStatus({
            id: this.dialogShowData.userId,
            status: this.dialogShowData.status
        })
        .then(data => {
            if (data.code == 200) {
              this.$message.success('操作成功!');
              this.isShowDialog = false;
              this.getPageDataList();
            } else {
              this.$message.error('操作失败!');
            }
          })
      },
      // 分页操作
      handlePagingChange(event) {
        this.pageIndex = event;
        this.getPageDataList();
      },
      handleSizeChange(event) {
        this.pageIndex = 1;
        this.pageSize = event;
        this.getPageDataList();
      },
      // 获取页面数据
      getPageDataList() {
        this.loading = true;
        GetShareCustomerList({
            ...this.queryForm,
            pageNum: this.pageIndex,
            pageSize: this.pageSize
        })
        .then(data => {
            this.loading = false;
            if (data.code != 200) {
                this.$message.error('加载失败，请重新刷新列表');
                return;
            }
            this.pageData = data.data.list;
            this.pageCount = data.data.total;
        })
        .catch(error => {
            this.loading = false;
            this.$message.error(error);
        })
      },
      resetOption() {
        this.queryForm.search = '';
        this.queryForm.phone = '';
        this.queryForm.status = '';
        this.queryForm.startTime = '';
        this.queryForm.endTime = '';
        this.dataTime = [];
        this.pageIndex = 0;
        this.getPageDataList();
      }
    },
    created() {
      this.getPageDataList();
    }
  }
</script>

<style lang="scss" scoped>
.shop_avator {
  width: 64px;
  height: 64px;
  vertical-align: middle;
  border-radius: 50%;
}

.width_104 {
  width: 104px;
}
</style>
